<template>
  <view class="container"  >
	  
    <!-- 修改头像区域 -->
    <view class="avatar-container">
      <view class="avatar-preview">
        <image :src="list.profilePrcture" class="avatar-image" @click="handleAvatarClick" />
      </view>
    </view>
    <!-- 个人信息表单 -->
    <view class="item">
      <view class="title">姓名</view>
      <input v-model="list.username" class="input" type="text" placeholder="请输入姓名" pattern="[^\s@<>/]+" minlength="2" maxlength="24" required />
   
	</view>
    
    <view class="item">
      <view class="title">性别</view>
      <select v-model="list.sex"  class="input">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </view>
    
    <view class="item">
      <view class="title">年龄</view>
      <select v-model="list.age" class="input">
        <option v-for="a in ages" :value="a">{{ a }} 岁</option>
      </select>
    </view>

    
       <view class="item">
         <view class="title">邮箱</view>
         <input v-model="list.email" @blur="checkEmail" class="input" type="text" placeholder="请输入邮箱号" />
         <text v-if="!emailValid" class="error">请输入正确的邮箱格式</text>
       </view>
    <view class="item">
      <view class="title">手机号码</view>
      <input v-model="list.phoneNumber" class="input" type="tel" placeholder="请输入手机号码" />
    </view>
    
    <view class="item">
      <view class="title">地区</view>
      <input v-model="list.address" class="input" type="text" placeholder="请输入住址" />
    </view>
    <view class="item">
      <view class="title">个人简介</view>
      <textarea v-model="list.bio" class="textarea" placeholder="请输入个人简介" maxlength="100"></textarea>
    </view>

    <!-- 提交按钮 -->
    <button @click="handleSubmit" class="submit-button">提交</button>
  </view>   
</template>

<script>
export default {
  data() {
    return {
      gender: -1,
	  ages: Array.from({ length: 201 }, (_, i) => i), // 0 到 200 岁的数组
	   emailValid: true, // 标记邮箱是否有效，默认为true
	  userId:uni.getStorageSync('id'),
	  list:[],
      avatarPreview: '../../static/Myimg/xt.jpg' // 初始的默认头像路径
    };
  },
  methods: {
	  onLoad() {
	  			// this.userId=uni.getStorageSync('id');
				
	  			// this.userId = getStorageSync("7"),
	  			this.request("/selectuserall/selectall", "get", {userId:this.userId}).then(
	  				(res) => {
	  					console.log(res);
	  					this.list=res.data.result.result;
						if(this.list.sex ===0){
							this.list.sex = '女'
						} else{
							this.list.sex = '男'
						}
	  				}).catch((err) => {s
	  					console.log(this.userId);
	  				console.log(err);
	  			});
	  			
	  		},
    handleAvatarClick() {
      // 点击头像的逻辑，例如弹出修改头像的选择框或其他操作
	 let imgurl=this.list.profilePrcture
      uni.navigateTo({
      	url:"/pages/My/setImg/setImg?imgurl"+imgurl
      })
	  
      // 在这里执行上传头像的逻辑或者跳转到修改头像的页面
      // 示例中暂未实现具体逻辑
    },
    handleSubmit() {
      // 创建一个新的对象，用于保存修改后的用户信息
      const updatedUserData = {
		userId:this.list.userId,
        username: this.list.username,
        sex: this.list.sex === '女' ? 0 : 1, // 根据字符串 '女' 或 '男' 转换为数字 0 或 1
        age: this.list.age,
        email: this.list.email,
        phoneNumber: this.list.phoneNumber,
        address: this.list.address,
        bio: this.list.bio
      };
    
      // 向后端发送请求保存用户信息
      this.request("/userProfileEditor/upUserProfileEditor", "post", updatedUserData)
        .then((res) => {
          console.log('用户信息更新成功');
		  //修改成功后，显示提示框 
		  uni.showToast({
			  title: '修改成功', icon: 'success', duration: 2000 ,// 提示框显示时间，单位为毫秒 
			  });
          // 处理成功的逻辑，例如跳转页面或提示用户
        }).catch((err) => {
          console.error('用户信息更新失败', err);
          // 处理失败的逻辑，例如显示错误信息给用户
        });
    }
			
			
			
			
    },
    checkEmail() {
         const emailRegex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
     
         // 检查邮箱格式是否符合正则表达式
         if (emailRegex.test(this.email)) {
           this.emailValid = true; // 符合格式，标记为有效
         } else {
           this.emailValid = false; // 不符合格式，标记为无效
           this.showEmailFormatError(); // 显示邮箱格式错误的提示框
         }
       },
       showEmailFormatError() {
         MessageBox.alert('邮箱格式错误，请输入有效的邮箱地址', '提示', {
           confirmButtonText: '确定',
           type: 'error',
         });
       },
     
    }

</script>

<style>
.container {
  padding: 40rpx;
}

.item {
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 600;
}

.input, .textarea, select {
  width: 95%;
  padding: 22rpx;
  border: 2rpx solid #ccc;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.textarea {
  height: 160rpx; /* 控制多行文本框的高度 */
}

/* 修改头像区域样式 */
.avatar-container {
  text-align: center;
  margin-bottom: 40rpx;
}

.avatar-preview {
  width: 240rpx;
  height: 240rpx;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.submit-button {
  width: 100%;
  padding: 20rpx;
  background-color: #ff524c;
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 32rpx;
  cursor: pointer;
}
</style>
